<template>
	<view>
		<view v-for="(v, index) in List" :key="index">
			<image :src="v.storePhoto" style="margin: 30rpx 5% 10rpx 5%; width: 90%"></image>
			<view class="Name">
				{{ v.storeName }}
			</view>
			<view class="boss">
				<view class="boss_bottom">
					<view>{{ v.bossName }}</view>
					<view>{{ v.phoneNumber }}</view>
				</view>
				<view class="image_button">
					<image src="../../static/电话.png"></image>
					<view class="collect_button">
						<view class="example-body" @click="modifyFavoriteStatus()">
							<uni-fav
								:checked="checkList[0]"
								class="favBtn"
								:circle="true"
								bg-color="#dd524d"
								bg-color-checked="#007aff"
								fg-color="#ffffff"
								fg-color-checked="#ffffff"
								@click="favClick(0)"
							/>
						</view>
					</view>
				</view>
			</view>
			<view class="distance">
				<view class="distance_bottom">
					<view>{{ v.storeAddress }}</view>
					<view>距离你{{ v.distance }}km</view>
				</view>
				<image src="../../static/地图.png" @click="map"></image>
			</view>
			<view class="bottom">
				<view class="price">
					<view>92#</view>
					<view>￥{{ price }}/L</view>
				</view>
				<view class="bottom_input">
					<input type="digit" />
					<view>立即加油</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '@/util/http.js';
export default {
	data() {
		return {
			price: 0,
			useId: 1,
			List: [],
			checkList: [false],
			storeAddress: []
		};
	},
	onLoad(options) {
		let myJsonString = options.myJson;
		let myJson = JSON.parse(myJsonString);
		let arr = [];
		arr[0] = myJson;
		this.List = arr;
		console.log(this.List);
		this.getPrice();
		this.useId = uni.getStorageSync('uid');
	},
	onShow() {
		this.storeWhetherToCollect();
	},
	methods: {
		getPrice() {
			http({
				url: '/goods/getPriceByGoodsId',
				data: {
					storeId: this.List[0].id
				},
				success: (res) => {
					this.price = res.data.data;
				}
			});
		},
		favClick(index) {
			this.checkList[index] = !this.checkList[index];
			this.$forceUpdate();
		},
		storeWhetherToCollect() {
			http({
				url: '/userStore/getUserCollectStore',
				data: {
					userId: this.useId,
					storeId: this.List[0].id
				},
				success: (res) => {
					this.checkList[0] = res.data.data;
					this.favClick(this.checkList[0]);
				}
			});
		},
		modifyFavoriteStatus() {
			http({
				url: '/userStore/updateOilStoreCollectState',
				data: {
					userId: this.useId,
					storeId: this.List[0].id
				},
				success: (res) => {}
			});
		},

		// 导航
		map() {
			let plugin = requirePlugin('routePlan');
			let key = 'PV5BZ-XYI6B-D5JUI-J7DML-OFOBT-PEFXS'; //使用在腾讯位置服务申请的key
			let referer = '帮你省app'; //调用插件的app的名称
			let endPoint = JSON.stringify({
				//终点
				name: this.List[0].storeName,
				latitude: this.List[0].latitude,
				longitude: this.List[0].longitude
			});
			console.log(endPoint);
			wx.navigateTo({
				url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
			});
		}
	}
};
</script>

<style>
body {
	background-color: #f0eff4;
}

.Name {
	margin: 15rpx 35rpx 10rpx 35rpx;
	background-color: white;
	border-radius: 10rpx;
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
	font-weight: 900;
	font-size: 20px;
}

.boss {
	margin-top: 20rpx;
	margin-left: 25rpx;
	margin-right: 25rpx;
	display: flex;
	background-color: white;
	border-radius: 10rpx;
}

.boss_bottom {
	width: 65%;
}

.image_button {
	width: 35%;
	display: flex;
}

.boss image {
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	width: 60rpx;
	height: 60rpx;
	border: 2px solid #a7a7a7;
	border-radius: 50%;
}

.boss_bottom view {
	margin-top: 10rpx;
	margin-left: 5%;
	height: 41rpx;
	line-height: 41rpx;
}

.boss_bottom view:nth-child(1) {
	font-size: 18px;
}

.collect_button {
	margin: auto auto;
}

.distance {
	display: flex;
	margin-top: 20rpx;
	margin-left: 15rpx;
	margin-right: 15rpx;
	background-color: white;
	border-radius: 10rpx;
}

.distance_bottom view {
	width: 580rpx;
	margin-top: 10rpx;
	margin-bottom: 10rpx;
	margin-left: 20rpx;
	height: 41rpx;
	line-height: 41rpx;
}

.distance image {
	margin: auto auto;
	width: 60rpx;
	height: 60rpx;
	border: 2px solid #a7a7a7;
	border-radius: 50%;
}

.bottom {
	margin-top: 15rpx;
	margin-left: 15rpx;
	margin-right: 15rpx;
	border: 3rpx solid rgb(255, 219, 202);
	background-color: white;
	border-radius: 10rpx;
}

.price {
	display: flex;
	margin-top: 15rpx;
}

.price view:nth-child(1) {
	font-weight: 900;
	font-size: 18px;
	height: 60rpx;
	line-height: 60rpx;
	margin-left: 20rpx;
	width: 350rpx;
}

.price view:nth-child(2) {
	width: 160rpx;
	height: 60rpx;
	line-height: 60rpx;
	margin-left: 60rpx;
}

.price view:nth-child(3) {
	width: 160rpx;
	margin-right: 20rpx;
	font-weight: 900;
	font-size: 18px;
	height: 60rpx;
	line-height: 60rpx;
	color: rgb(255, 94, 39);
}

.bottom_input {
	display: flex;
	margin-bottom: 20rpx;
}

.bottom_input input {
	background-color: rgb(255, 245, 243);
	border-radius: 50rpx;
	margin-left: 20rpx;
	width: 500rpx;
	height: 50rpx;
}

.bottom_input view {
	width: 150rpx;
	height: 50rpx;
	line-height: 50rpx;
	text-align: center;
	margin: auto auto;
	background-color: rgb(255, 100, 69);
	color: white;
	border-radius: 30rpx;
}
</style>
